<!-- 分类管理页面-- -->
<style>
  *{
    margin: 0px;
    padding: 0px;
  }
  table,
  tr,
  td {
    border-bottom: 1px solid #cccccc;
  }
  table {
    margin-top: 10px;
     width: 100%; 
    text-align: center;
    line-height: 30px;
  }
  td {
    padding: 10px;
  }
  .classify-add {
    width: 45px;
    height: 30px;
    border: 0px;
    background-color: #2cb5ac;
    color: white;
  }
  input{
    width: 450px;
  }
  .modal-body > div{
    padding:10px;
  }
  select{
    width: 200px;
    height: 50px;
  }
  textarea{
    width: 450px;
  }
</style>
<div>
  <div class="row">
    <div class="col-md-4">
      <button class="classify-add">新增</button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <table class="classify-content">
        <thead>
          <tr>
            <td>序号</td>
            <td>名称</td>
            <td>排序号</td>
            <td>父栏目</td>
            <td>描述</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</div>
<!-- 模态框 -->
      <div id="classify-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <div>
       栏目名称：<input type="text" name="name">
        </div>
        <div>
      &nbsp;&nbsp;&nbsp;&nbsp;父栏目：<select>
        <option>请选择父栏目</option>
        <option>校园新闻</option>
        <option>通知公告</option>
        <option>学术活动</option>
        <option>媒体聚焦</option>
        <option>学院快讯</option>
       </select>
      </div>
       <div>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序号：<input type="text" name="id">
        </div>
         <div>
      <span>栏目介绍：</span><textarea rows="3" name="description"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          取消
        </button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script>
  var baseurl = "http://localhost:7788";

  function getData(type, url) {
    var p = new Promise((resole, reject) => {
      $.ajax({
        url: url,
        type: type,
        headers: {
          Authorization: sessionStorage.getItem("token"),
        },
        success: function (data) {
          resole(data);
        },
      });
    });
    return p;
  }

// 更新数据
  function getUpdata(url){
    return getData('get',baseurl + url).then(function(data){
      $(".classify-content tbody").empty();
     data.data.forEach((item) => {
      $(".classify-content tbody").append(`
          <tr>
            <td>`+item.id+`</td>
            <td>`+item.name+`</td>
            <td>`+item.no+`</td>
            <td>${item.parentId === "null"?"":""}</td>
            <td>${item.description === "null"?"":""}</td>
            <td>
            <button class="classify-compile">编辑</button>
            <button class="classify-delete">删除</button>
            </td>
          </tr>
        `);
    });
    })
  }

  // 获取栏目相关信息
  getData("get", baseurl + "/category/findAll").then(function (data) {
    console.log(data);
    data.data.forEach((item) => {
      $(".classify-content tbody").append(`
          <tr>
            <td>`+item.id+`</td>
            <td>`+item.name+`</td>
            <td>`+item.no+`</td>
            <td>${item.parentId === "null"?"":""}</td>
            <td>${item.description === "null"?"":""}</td>
            <td>
            <button class="classify-compile">编辑</button>
            <button class="classify-delete">删除</button>
            </td>
          </tr>
        `);
    });
    // 编辑
    $('.classify-compile').click(()=>{
      $('#classify-modal').modal();
      $('.modal-title').text('编辑栏目');
      var id =$(event.target).parent().parent().children().eq(0).text();
      var editData = data.data.filter(function(item){
        if(item.id=id){
          $('input[name=name]').val(item.name);
          // $('select').val(item.name:selected);
          $('input[name=id]').val(item.id);
          $('input[name=description]').val(item.description);
        }
      })
    })

    // 删除
    $('.classify-delete').click(()=>{
      id = $(event.target).parent().parent().children().eq(0).text();
      getData('get',baseurl + '/category/deleteById?id='+id).then(function(data){
        // console.log(data);
        if(data.status == 200){
          alert(data.message);
        }else{
          alert(data.message);
        }
        getUpdata("/category/findAll");
      })
    })
  });

  // 新增
  $('.classify-add').click(()=>{    
   $('#classify-modal').modal();
   $('.modal-title').text('新增栏目');

   $(this).removeData('bs.modal');
  })
  // getData('post',baseurl + '/category/saveOrUpdate').then(function(data){
  //   console.log(data);
  // })
</script>
